<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<link rel="stylesheet" type="text/css" href="css/qq.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dl.css">

</head>
<body>
<div style='position:fixed;width:100%;height:100%;background:white;z-index:999;display:none;'>
  <div class="QQlogin" id="QQlogin" style='display:none;'>
        <aside></aside>
        <i class="close"></i>
        <div class="row down down_dl">
            <div class="col-xs-3 touxiang">
                <a href="#"></a>
                <dl>
                    <dt><a href="#"><span class="online"></span></a></dt>
                    <dd>
                        <a href="#"><span class="online"></span>我在线上</a>
                        <a href="#"><span class="callMe"></span>Q我吧</a>
                        <a href="#"><span class="away"></span>离开</a>
                        <a href="#"><span class="busy"></span>忙碌</a>
                        <a href="#"><span class="silent"></span>请勿打扰</a>
                        <a href="#"><span class="hid"></span>隐身</a>
                    </dd>
                </dl>
                <i class="people"></i>
            </div>
            <div class="col-xs-6 login-box">
                <input type="text" placeholder="QQ号码/手机/邮箱" name='user'><span class="first"></span>
                <input type="password" placeholder="密码" name='pass'><span class="second" ></span>
                <label><input type="checkbox" class="three">&nbsp;记住密码</label>
                <label class="auto-login"><input type="checkbox" class="four">&nbsp;自动登录</label>
                <button class="btn zc">注&nbsp;&nbsp;&nbsp;&nbsp;册</button><button class="btn dl" style='margin-left:5px;'>登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </div>
            <div class="col-xs-3 register">
                <a href="#">注册账号</a>
                <a href="#" class="find-password">找回密码</a>
            </div>
        </div>
        <!---->
		      <div class="row down down_zc">
            <div class="col-xs-3 touxiang">
                <a href="#"></a>
                <dl>
                    <dt><a href="#"><span class="online"></span></a></dt>
                    <dd>
                        <a href="#"><span class="online"></span>我在线上</a>
                        <a href="#"><span class="callMe"></span>Q我吧</a>
                        <a href="#"><span class="away"></span>离开</a>
                        <a href="#"><span class="busy"></span>忙碌</a>
                        <a href="#"><span class="silent"></span>请勿打扰</a>
                        <a href="#"><span class="hid"></span>隐身</a>
                    </dd>
                </dl>
                <i class="people"></i>
            </div>
            <div class="col-xs-6 login-box">
                <input type="text" placeholder="QQ号码/手机/邮箱" name='user'><span class="first"></span>
                <input type="password" placeholder="密码" name='pass'><span class="second" ></span>
                <input type="password" placeholder="确认密码" name='pass2'><span class="second" ></span>
                <button class="btn zc2">注&nbsp;&nbsp;&nbsp;&nbsp;册</button><button class="btn dl2" style='margin-left:5px;'>登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </div>
            <div class="col-xs-3 register">
                <a href="#">注册账号</a>
                <a href="#" class="find-password">找回密码</a>
            </div>
        </div>
		<!---->

    </div>
</div>
<!---->

<div class="qqBox">
	<div class="BoxHead">
		<div class="headImg">
			<!--<img src="img/6.jpg"/> 自己的头像-->
		</div>
		<div class="internetName">90后大叔</div>
	</div>
	<div class="context">
		<div class="conLeft">
			<ul>
				<li>
					<div class="liLeft"><img src="img/20170926103645_04.jpg"/></div>
					<div class="liRight">
						<span class="intername">前端交流群</span>
						<span class="infor">厉害了</span>
					</div>
				</li>
				<li class="bg">
					<div class="liLeft"><img src="img/20170926103645_19.jpg"/></div>
					<div class="liRight">
						<span  class="intername">赵鹏</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_27.jpg"/></div>
					<div class="liRight">
						<span  class="intername">web交流群</span>
						<span class="infor">666</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_21.jpg"/></div>
					<div class="liRight">
						<span  class="intername">jquery插件库</span>
						<span class="infor">这个群妹子多</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_23.jpg"/></div>
					<div class="liRight">
						<span  class="intername">我的phone</span>
						<span class="infor">[文件]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_25.jpg"/></div>
					<div class="liRight">
						<span  class="intername">...</span>
						<span class="infor">[么么哒]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_27.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">前端小黑：怎么才能</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_29.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">大西瓜：差评，这个下面又</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_54.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_04.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_19.jpg"/></div>
					<div class="liRight">
						<span  class="intername">赵鹏</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_27.jpg"/></div>
					<div class="liRight">
						<span  class="intername">web交流群</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_21.jpg"/></div>
					<div class="liRight">
						<span  class="intername">jquery插件库</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_23.jpg"/></div>
					<div class="liRight">
						<span  class="intername">我的phone</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_25.jpg"/></div>
					<div class="liRight">
						<span  class="intername">...</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_27.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_29.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
				<li>
					<div class="liLeft"><img src="img/20170926103645_54.jpg"/></div>
					<div class="liRight">
						<span  class="intername">前端交流群</span>
						<span class="infor">[流泪]</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="conRight">
			<div class="Righthead">
				<div class="headName">赵鹏</div>
				<div class="headConfig">
					<ul>
						<li><img src="img/20170926103645_06.jpg"/></li>
						<li><img src="img/20170926103645_08.jpg"/></li>
						<li><img src="img/20170926103645_10.jpg"/></li>
						<li><img src="img/20170926103645_12.jpg"/></li>
					</ul>
				</div>
			</div>
			<div class="RightCont">
				<ul class="newsList">
				
				</ul>
			</div>
			<div class="RightFoot">
				<div class="emjon">
					<ul>
						<li><img src="img/em_02.jpg"/></li>
						<li><img src="img/em_05.jpg"/></li>
						<li><img src="img/em_07.jpg"/></li>
						<li><img src="img/em_12.jpg"/></li>
						<li><img src="img/em_14.jpg"/></li>
						<li><img src="img/em_16.jpg"/></li>
						<li><img src="img/em_20.jpg"/></li>
						<li><img src="img/em_23.jpg"/></li>
						<li><img src="img/em_25.jpg"/></li>
						<li><img src="img/em_30.jpg"/></li>
						<li><img src="img/em_31.jpg"/></li>
						<li><img src="img/em_33.jpg"/></li>
						<li><img src="img/em_37.jpg"/></li>
						<li><img src="img/em_38.jpg"/></li>
						<li><img src="img/em_40.jpg"/></li>
						<li><img src="img/em_45.jpg"/></li>
						<li><img src="img/em_47.jpg"/></li>
						<li><img src="img/em_48.jpg"/></li>
						<li><img src="img/em_52.jpg"/></li>
						<li><img src="img/em_54.jpg"/></li>
						<li><img src="img/em_55.jpg"/></li>
					</ul>
				</div>
				<div class="footTop">
					<ul>
						<li><img src="img/20170926103645_31.jpg"/></li>
						<li class="ExP"><img src="img/20170926103645_33.jpg"/></li>
						<li><img src="img/20170926103645_35.jpg"/></li>
						<li><img src="img/20170926103645_37.jpg"/></li>
						<li><img src="img/20170926103645_39.jpg"/></li>
						<li><img src="img/20170926103645_41.jpg" alt="" /></li>
						<li><img src="img/20170926103645_43.jpg"/></li>
						<li><img src="img/20170926103645_45.jpg"/></li>
					</ul>
				</div>
				<div class="inputBox">
					<textarea id="dope" style="width: 99%;height: 75px; border: none;outline: none;" name="" rows="" cols=""></textarea>
					<button class="sendBtn">发送(s)</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/chat.js"></script><script src='/layer/layer.js'></script>
<script src='/layer/funclayer.js'></script>

</body>
</html>
<!--登录的js代码-->
<script>
       var QQlogin=document.querySelector("#QQlogin");
    var aside=document.querySelector("#QQlogin aside");
    var link=document.querySelector("#QQlogin dl dt a");
    var box=document.querySelector("#QQlogin dl dd");
    var links=document.querySelectorAll("#QQlogin dl dd a");
    var mask=document.querySelector("#mask");
    var close=document.querySelector("#QQlogin i.close");
    //alert(aside.nodeName);
    //处理拖动QQ的登录框

    aside.onmousedown=function(e){
        var x= e.clientX-QQlogin.offsetLeft;
        var y= e.clientY-QQlogin.offsetTop;
        document.onmousemove=function(e){
            var top=e.clientY-y;
            var left=e.clientX-x;
            top=Math.min((Math.max(0,top)),window.innerHeight-QQlogin.offsetHeight);
            left=Math.min((Math.max(0,left)),window.innerWidth-QQlogin.offsetWidth);
            //console.log("top:"+top+"-left:"+left);
            QQlogin.style.top= top+"px";
            QQlogin.style.left= left+"px";
        };
        document.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    };
    //点击头像上的在线状态出来dd的内容
    link.onclick=function(e){

       //alert("ok");
        box.style.display="block";
        e.stopPropagation();
    };
    document.onclick=function(){
        box.style.display="none";
    };

    //处理头像上的选择在线状态
    var span=document.querySelector("#QQlogin dl dt a span");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            span.className=this.querySelector("span").className;
            //alert(this.previousSibling.nodeName);

            span.innerText=this.querySelector("span").innerText;
            //alert(span.innerText);
        }

    }


    //重新调整对话框的位置和遮罩，并且展现

   
    //处理关闭对话框
    close.onclick=function(){
        QQlogin.style.display='none';
        //mask.style.display='none';
		$('#QQlogin').parent().hide();
    }

$('.zc').click(function(){
   $(this).parent().parent().css({'transition':'0.8s','margin-left':'-434px'});
});

$('.dl2').click(function(){
   $('.down').eq(0).css({'transition':'0.8s','margin-left':'0px'});
});



//判断是否登入显示登入框
window.user="{$user}";
if(window.user!=''){
	QQlogin.style.display='none';
    $('#QQlogin').parent().hide();
}else{
    QQlogin.style.display='block';
    $('#QQlogin').parent().show();
}


//登入
$('.dl').on('click',function(){
     var t=$('.down_dl');
     var user=t.find('input[name=user]');
     var pass=t.find('input[name=pass]');
     if(user.val()==''){_.tips('账号不能为空！',user,1600,'#ccc');return;}
     if(pass.val()==''){_.tips('密码不能为空！',pass,1600,'#ccc');return;}
     $.ajax({
     	url:'login',
     	data:{user:user.val(),pass:pass.val()},
     	type:'post',
     	dataType:'json',
     	success:function(res){
     		if(res.status=='ok'){
     			 _.msg('登入成功！',1,1600);
     			 QQlogin.style.display='none';
		         $('#QQlogin').parent().hide();
     		}else{
     		    _.msg(res.error,7,1600);
     		}
     	}
     });
});

//注册账号
$('.zc2').click(function(){
		var str = new RegExp("[\u4E00-\u9FA5]+");
		var t=$('.down_zc');
		var user=t.find('input[name=user]');
		var pas=t.find('input[name=pass]');
		var pas2=t.find('input[name=pass2]');
        if(str.test(user.val())){
		   _.tips('账号不能是字符串！',user,1600,'#ccc');
		   return;
		}else if(user.val().length<7 || user.val().length>12){
		   _.tips('账号长度在7-12！',user,2000,'#ccc');
		   return;
		}
		if(pas.val().length<7){
		    _.tips('密码长度在7以上！',pas,1600,'#ccc');
			return;
		}

		if(pas2.val()!==pas.val()){
		   _.tips('密码不一致！',pas2,1600,'#ccc');
		   return;
		}

		$.ajax({
		   url:'register',
		   type:'post',
		   data:{user:user.val(),pass:pas2.val()},
		   dataType:'json',
		   success:function(res){
		   	  if(res.status=='ok'){
		   	  	   _.msg('注册成功！',1,1600);
		   	  	   setTimeout(function(){
		   	  	   	   $('.down').eq(0).css({'transition':'0.8s','margin-left':'0px'});
		   	  	   },1600);
		   	  }else{
		   	  	   _.msg(res.error,7,1600);
		   	  }
		   }
		});
  
});
	
</script>